import React, {useRef} from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect} from 'umi'
import { getPersonFundsList} from '../service'
import { DatePicker} from 'antd'
import moment from 'moment'

const TableList = () => {
  const actionRef = useRef()

  const columns = [
    {
      title: '缴费时间',
      fixed: 'left',
      width: '100px',
      align: 'center',
      dataIndex: 'operateTime',
      renderFormItem: (item, props) => {
        return <DatePicker {...props} picker="month" />;
      },
      render: (text) => {
        return text!=='-'?moment(text).format('YYYY-MM'):''
      }
    },
    {
      title: '姓名',
      fixed: 'left',
      width: '70px',
      align: 'center',
      dataIndex: 'name',
    },
    {
      title: '参保地',
      width: '140px',
      align: 'center',
      dataIndex: 'cityName',
    },
    {
      title: '参保单位',
      align: 'center',
      width: '240px',
      dataIndex: 'unitName',
    },
    {
      title: '公积金',
      children: [
        {
          title: '基数',
          dataIndex: 'reservedFundsBase',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          dataIndex: 'reservedFundsPerson',
          hideInSearch: true,
        },
        {
          title: '公司缴纳',
          dataIndex: 'reservedFundsOrg',
          hideInSearch: true,
        }
      ]
    },
    {
      title: '补充公积金',
      children: [
        {
          title: '基数',
          dataIndex: 'offerFundsBase',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          dataIndex: 'offerFundsPerson',
          hideInSearch: true,
        },
        {
          title: '公司缴纳',
          dataIndex: 'offerFundsOrg',
          hideInSearch: true,
        }
      ]
    },

    {
      title: '合计',
      children: [
        {
          title: '个人',
          dataIndex: 'personCostTotal',
          hideInSearch: true,
        },
        {
          title: '公司',
          dataIndex: 'orgCostTotal',
          hideInSearch: true,
        },
      ]
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable
        bordered
        search={false}
        scroll={{x:'1200px'}}
        actionRef={actionRef}
        rowKey="recordId"
        request={(params) => getPersonFundsList(params)}
        columns={columns}
      />
    </PageHeaderWrapper>
  )
}

export default connect(({}) => ({
}))(TableList)
